<script setup lang="ts">
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";
import * as echarts from "echarts/core";

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const barChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(barChartRef as Ref<HTMLDivElement>, {
  theme
});
const gaugeData = [
  {
    value: 20,
    name: "高糖的饮食",
    title: {
      offsetCenter: ["0%", "-30%"]
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ["0%", "-20%"]
    }
  },
  {
    value: 40,
    name: "体育活动",
    title: {
      offsetCenter: ["0%", "0%"]
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ["0%", "10%"]
    }
  },
  {
    value: 70,
    name: "睡眠时间",
    title: {
      offsetCenter: ["0%", "30%"]
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ["0%", "40%"]
    }
  }
];
setOptions({
  series: [
    {
      type: "gauge",
      startAngle: 90,
      endAngle: -270,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          borderWidth: 1,
          borderColor: "#464646"
        }
      },
      axisLine: {
        lineStyle: {
          width: 30
        }
      },
      splitLine: {
        show: false,
        distance: 0,
        length: 10
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        distance: 50
      },
      data: gaugeData,
      title: {
        fontSize: 14
      },
      detail: {
        width: 50,
        height: 8,
        fontSize: 14,
        color: "inherit",
        borderColor: "inherit",
        borderRadius: 20,
        borderWidth: 1,
        formatter: "{value}%"
      }
    }
  ]
});

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="barChartRef" style="height: 50vh" />
  <div>
    <p>
      <span style="font-weight: 800"> 疲劳管理</span><br />

      1、建议刘先生定期进行适度的体育活动，比如每天
      <span style="color: #409eff">至少30分钟</span>的快走或瑜伽等。<br />
      确保充足的睡眠时间，每天<span style="color: #409eff">至少7至8小时</span
      >的睡眠。<br />
      2、尽可能避免高咖啡因和高糖的饮食，这些可能会短暂提高能量，但长期可能导致疲劳。<br />
      <span style="font-weight: 800"> 压力管理</span><br />
      3、建议刘先生尝试一些压力管理技巧，比如深呼吸、冥想或者温馨的瑜伽。<br />
      4、找到一个可以谈话和分享压力的朋友或家人，或者寻求专业的心理咨询。<br />
      5、尝试将工作和生活压力分开，设定工作和休息的明确时间。
    </p>
  </div>
</template>
